<!--  -->
<template>
  <div class='configFontsize'>
    <div class="tabsView">
      <div
       :class="!item.ischecked ? 'item' : 'itemChecked'"
       v-for="(item,index) in lists"
       :key="index"
       @click="checkItem(index,item.name)">
        <div class="title">
          {{ item.name }}
        </div>
        <div class="details">
          {{ item.details }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
  //这里存放数据
    return {};
  },
  props: {
    lists: {
      type: Array,
      default: [],
      require: true
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    
  },
  //方法集合
  methods: {
    checkItem(index,item) {
      this.$emit('changeContent', index, item);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  onShow() {

  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  @import "@/common/configStyle.scss";
  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: #f9f9f9;
  }
  .tabsView {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0 15rpx 0;
    .item {
      width: 25%;
      text-align: center;
      .title {
        font-weight: 800;
        margin-bottom: 5rpx;
      }
      .details {
        color: #999;
      }
    }
    .itemChecked {
      width: 25%;
      text-align: center;
      .title {
        font-weight: 800;
        margin-bottom: 5rpx;
        color: #584be3;
      }
      .details {
        color: $ruyi-config-CheckColor;
      }
    }
  }

</style>
